import { Descriptions, Divider } from "antd";
import React from "react";

import { CustomSubTitle } from "@/components/customTitle";
import styled from "styled-components";
// import MyDatePicker from "./components/MyDatePicker";
import useParkStore from "@/store/parkStore";

const StyledCustomSubTitle = styled(CustomSubTitle)`
  font-size: 18px !important;
  line-height: 28px !important;
  color: #998065 !important;
`;

export const targetTime = new Date().getTime() + 15 * 60 * 1000;
export const formatTime = (currentTime: any) => {
  const minutes = Math.floor(currentTime / 1000 / 60);
  const remainingSeconds = Math.floor(currentTime / 1000) % 60;
  return `${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`;
};

const SubmitMonthly: React.FC = () => {
  const { parkList, vehicleList } = useParkStore();
  return (
    <>
      <StyledCustomSubTitle>
        Please confirm your booking information
      </StyledCustomSubTitle>
      <CustomSubTitle>Vehicle Information</CustomSubTitle>
      <Descriptions column={4} layout="vertical">
        <Descriptions.Item label="Vehicle Type">
          {vehicleList.vehType}
        </Descriptions.Item>
        <Descriptions.Item label="License Plate Number">
          {vehicleList?.lpnNo}
        </Descriptions.Item>
        <Descriptions.Item label="Octopus No.">
          {vehicleList?.octopus}
        </Descriptions.Item>
      </Descriptions>
      <Divider plain></Divider>
      <CustomSubTitle>Parking Information</CustomSubTitle>
      <Descriptions column={4} layout="vertical">
        <Descriptions.Item label="Car Park">
          {parkList?.englishName}
        </Descriptions.Item>
        <Descriptions.Item label="Eligible Month">2</Descriptions.Item>
        <Descriptions.Item label="Parking Period">3</Descriptions.Item>
        <Descriptions.Item label="Payment Amount">3</Descriptions.Item>
      </Descriptions>
      <Divider plain></Divider>
      {/* submitted Failed modal */}
    </>
  );
};

export default SubmitMonthly;
